<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>首页-最新微博</title>
  <link
          rel="stylesheet"
          href="../../static/css/common.css"
          type="text/css"
          th:href="@{/static/css/common.css}"
  />
  <link rel="stylesheet" href="../../static/css/publishBlog.css" th:href="@{/static/css/publishBlog.css}">
  <link
          rel="stylesheet"
          type="text/css"
          href="../../static/css/replymask.css"
          th:href="@{/static/css/replymask.css}"
  />
  <link
          rel="stylesheet"
          type="text/css"
          th:href="@{/static/css/iconfont01.css}"
  />
  <link
          rel="stylesheet"
          href="../../static/customAlertConfirm/customAlertConfirm.css"
          th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
  />

</head>

<body>
<div th:replace="~{unlogin :: mask }"></div>
<div th:replace="~{home::publishBlogBox}"></div>
<div th:replace="~{hot::#model}"></div>

<div th:replace="~{home::tip-off}"></div>
<div class="top" th:replace="~{home::top}">

  <div id="top">
    <!-- logo -->
    <div id="logo-search">
      <div class="logo">
        <img src="../../static/img/logo.png" alt="" />
      </div>
      <div class="top-search" th:replace="~{hot::topSearch}">
        <span><i class="iconfont">&#xe623;</i></span>
        <input type="text" placeholder="请输入搜索内容" id="top-input" />
        <div class="search-list">
          <div>
            <span><i class="iconfont">&#xe65a;</i> 1111</span>
          </div>
          <div>
            <span><i class="iconfont">&#xe65a;</i> 1111</span>
          </div>
          <div>
            <span><i class="iconfont">&#xe65a;</i> 1111</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 各种功能 -->
    <div id="fn">
      <div class="home border fn">
        <a class="icon" href="home.html" th:href="@{/home}"
        ><i class="iconfont">&#xe625;</i></a
        >
      </div>
      <div class="hot fn">
        <a class="icon" href="hot.html" th:href="@{/hot}"
        ><i class="iconfont">&#xe628;</i></a
        >
      </div>
      <div class="message fn">
        <a class="icon" href="message.html" th:href="@{/message}"
        ><i class="iconfont">&#xe908;</i></a
        >
      </div>
      <div class="private fn">
        <a class="icon" href="personalPage.html" th:href="@{/person}"
        ><i class="iconfont">&#xe60a;</i></a
        >
      </div>
    </div>
    <!-- 登录，设置等-->
    <div class="access" th:replace="~{hot::access}">
      <div class="setting">
        <button class="top-setting-btn">
          <i class="iconfont">&#xe645; </i>
        </button>
        <div class="setting-list">
          <a th:href="@{/my/toMyInfo}">个人中心</a>
          <a>账号修改</a>
          <a class="out" >退出</a>
        </div>
      </div>

      <div class="setting">
        <button class="top-pattern-btn">
          <i class="iconfont">&#xe6d9;</i>
        </button>
      </div>
      <div class="setting">
        <button class="top-publish-btn">
          <i class="iconfont">&#xe61d; </i>
        </button>
      </div>
    </div>
  </div>
</div>
<div id="content">
  <div class="list">
    <p>首页</p>
    <ul>
      <a  th:href="@{/blog/getMyConnectionBlog}">
        <span><i class="iconfont">&#xe655;</i></span>
        全部关注
      </a>
      <a class="color" th:href="@{/blog/getMyLatestConnectionBlog}">
        <span><i class="iconfont">&#xe634;</i></span>
        最新微博
      </a>
    </ul>
  </div>

  <div id="news" >
    <div class="allnews">
      <div class="news" th:each="newblog:${list}" th:bid="${newblog.id}" th:uid="${newblog.uid}">
      <div class="news-top">
        <a th:href="@{/user/toOnesInfo(id=${newblog.uid})}" class="head-link">
          <div class="head">
            <img

                    th:src="@{${newblog.userAvatarUrl}}"
                    alt=""
            />
          </div>
        </a>
        <div class="top-details">
          <a th:href="@{/user/toOnesInfo(id=${newblog.uid})}" class="name"  >
            <p th:text="${newblog.username}">XXX</p>
          </a>
          <p class="time" th:text="${newblog.time}">3-18</p>
        </div>
        <div class="report-remove">
          <div
                  class="rm-icon"
                  th:bid="${newblog.id}"
                  th:otherid="${newblog.uid}"
                  onclick="reportfn(this)"
          >
            <i class="iconfont">&#xe62e;</i>
          </div>
          <ul class="rm-detials hidden">
            <li class="tip-off-li" th:bid="${newblog.id}" onclick="tipOffFn(this)">投诉</li>
            <li class="remove-li" th:bid="${newblog.id}" onclick="removeBlog(this)">删除</li>
          </ul>
        </div>
      </div>
      <div class="news-container">
        <div class="container">
          <a class="color" th:href="@{/blog/skipToBlog(label=${newblog.label})}" th:text="'#'+${newblog.label}+'#'"></a>&nbsp;&nbsp;<span class="container-text" th:text="${newblog.text}"></span>

          <span class="collapse more">...展开</span>
        </div>
        <div class="news-content">
          <div class="news-content-img"  th:each="img:${newblog.pictureUrl}">
            <img th:src="@{${img}}" src="../../static/img/logo.jpg" alt="" onclick="showModel(this)">
          </div>

        </div>
      </div>
      <div class="foot">
        <div class="share">
          <i class="iconfont">&#xe62f;</i>
          <span th:text="${newblog.transmit}>0?${newblog.transmit}:'分享'">12</span>
        </div>
        <div class="assess" th:bid="${newblog.id}">
          <i class="iconfont">&#xe695;</i>
          <span th:text="${newblog.comment}>0?${newblog.comment}:'评论'">12</span>
          </a>
        </div>
        <div class="store">
          <i class="iconfont">&#xe647;</i>
          <span>收藏</span>
        </div>
        <div class="like">
          <i class="iconfont">&#xe62b;</i>
          <span th:text="${newblog.likes}>0?${newblog.likes}:'点赞'">12</span>
        </div>
      </div>
      <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
        <span class="comment-ddl">还可输入140字</span>
        <button class="comment-btn disable" th:bid="${newblog.id}">评论</button>
        <div class="comment" >
        </div>
        <div class="blog-skip" >
          <a th:href="@{/blog/skipInEnvelope(id=${newblog.id})}">查看全部评论 ></a>
        </div>
      </div>
    </div>
    </div>
    <p class="none hidden"></p>
  </div>
  <div id="right-bar" th:replace="~{home::#right-bar}">
    <div id="hot">
      <div class="hot-top">
        <div class="hot-top-content"><p>热搜</p></div>
        <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
      </div>
      <div class="allHotList">

        <div class="hot-list" th:each="hot,list:${hotLabelList}">
            <span
                    class="rank1"
                    th:class="|rank${list.count}|"
                    th:text="${list.count}"
            >1</span
            ><a th:text="${hot}" th:href="@{/blog/skipToBlog(label=${hot})}"></a>
        </div>
        <a href="" class="all-hot" th:href="@{/blog/getHotBlog}"><div>查看完整榜单</div></a>

      </div>

    </div>

    <a class="return-top" href="#">
      <i class="iconfont">&#xea7d;</i>
    </a>
  </div>
</div>
</body>

<script
        type="text/javascript"
        src="../../static/js/jquery3.7.1.min.js"
        th:src="@{/static/js/jquery3.7.1.min.js}"
></script>
<script
        type="text/javascript"
        src="../../static/customAlertConfirm/customAlertConfirm.js"
        th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"
></script>
<script
        type="text/javascript"
        src="../../static/js/personalPage-publish.js"
        th:src="@{/static/js/personalPage-publish.js}"
></script>
<script
        type="text/javascript"
        src="../../static/js/common.js"
        th:src="@{/static/js/common.js}"
></script>
<script
        type="text/javascript"
        src="../../static/js/replymask.js"
        th:src="@{/static/js/replymask.js}"
></script>
<script th:src="@{/static/js/more.js}"></script>
<script th:src="@{/static/js/loadingHomeNew.js}"></script>
<script th:inline="javascript">
  let alnews=document.getElementsByClassName("news");

  if(alnews.length==0){
    document.querySelector("#news").innerHTML=`<div class="news empty">暂无数据</div>`
  }
</script>
</html>
